<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/attendance_summary.css">
	<link rel="stylesheet" href="/scriptZIP/font-awesome.css">
	<title>考勤汇总</title>
	<style>
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>
	<div id="attendanceSummary">
		<div class="head-btn-box">
			<!-- 日历 -->
			<input placeholder="选择日期" readonly class="other" v-model="date" id="Time" />
			<select class="ui-select search" v-model="selectTime">
				<option :value="0">全天</option>
				<option v-for="device in timeList" :key="device.id" :value="device.id"
					v-text="device.startTime+'-'+device.endTime">
				</option>
			</select>
			<a :href="exportUrl" v-if="able.export">
				<div class="btn">导出数据</div>
			</a>
		</div>
		<div class="all-box" v-cloak>
			<div class="allstudent">
				<span class="text1">{{student.allNum || 0}}人</span>
				<span class="text2">学生总人数</span>
				<div class="sign-box">
					<div class="sign-item1">
						<span class="text1">{{student.attend||0}}人</span>
						<span class="text2">签到人数</span>
					</div>
					<div class="sign-item2">
						<span class="text1">{{student.absent||0}}人</span>
						<span class="text2">未签到人数</span>
					</div>
				</div>
			</div>
			<div class="allteacher">
				<span class="text1">{{teacherData[0]?teacherData[0].absent.length +
					teacherData[0].attend.length:0}}人</span>
				<span class="text2">教师总人数</span>
				<div class="sign-box">
					<div class="sign-item1">
						<span class="text1">{{teacherData[0]?teacherData[0].attend.length:0}}人</span>
						<span class="text2">签到人数</span>
					</div>
					<div class="sign-item2">
						<span class="text1">{{teacherData[0]?teacherData[0].absent.length:0}}人</span>
						<span class="text2">未签到人数</span>
					</div>
				</div>
			</div>
		</div>
		<div class="total-box" v-cloak>
			<div class="class-list-box" v-for="(item,k) in dataList" :key="k" @click="xiala(item,k)">
				<div class="class-list1">
					<span class="class-item1">{{item.className}}</span>
					<div class="right">
						<span class="class-item2">总人数:{{item.studentAttend.length + item.studentAbsent.length}}人</span>
						<span class="class-item2">打卡人数:{{item.studentAttend.length}}人</span>
						<span class="class-item2">未打卡人数:{{item.studentAbsent.length}}人</span>
						<span class="class-item3"><i class="fa fa-chevron-down arrow"
								:class="{open : selectIndex == k&& item.open}"></i></span>
					</div>
				</div>
				<div class="class-list2" v-if="item.open && selectIndex==k">
					<template v-if="item.studentAttend.length || item.studentAbsent.length">
						<span class="name-item1" v-for="(item2,i) in item.studentAttend" :key="i">{{item2}}</span>
						<span class="name-item1 name-item2" v-for="(item2,i) in item.studentAbsent"
							:key="i">{{item2}}</span>
					</template>
					<span class="name-item3" v-else>暂无数据！</span>
				</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>
		var schoolId = top_params().id;
		var app = new Vue({
			el: '#attendanceSummary',
			data: {
				date: dayjs().format('YYYY-MM-DD'),
				selectTime: 0,//默认时间段
				timeList: [],//选择时间段
				selectIndex: 0,
				teacherData: [],//老师数据
				studentData: [],//学生数据
				student: { allNum: '', attend: '', absent: '' },
				dataList: []//下拉数据
			},
			created: function () {
				abled('attendanceSummary', this);
				axios.get('/pc/period/' + schoolId).then(function (res) {
					this.timeList = res.data.map(function (item, i) {
						return {
							id: i + 1,
							startTime: item.startTime,
							endTime: item.endTime
						};
					})
					this.getAllData();
				}.bind(this));
			},
			methods: {
				getAllData: function () {
					axios.get('/pc/attendance/sum/' + schoolId, {
						params: this.params
					}).then(function (res) {
						this.teacherData.push(res.data[0]);
						var attendList = []; //已签
						var absentList = []; //缺勤
						this.studentData = []; //清空添加的数据
						for (var i = 1; i < res.data.length; i++) {
							this.studentData.push(res.data[i]);
							attendList.push(res.data[i].attend.length);
							absentList.push(res.data[i].absent.length);
						};
						this.student.attend = attendList.reduce(function (old, now) {
							return old + now;
						}, 0);
						this.student.absent = absentList.reduce(function (old, now) {
							return old + now;
						}, 0);
						// this.student.allNum = this.student.absent + this.student.attend;
						this.dataList = this.studentData.map(function (it, i) {
							return {
								classId: it.id,
								className: it.name,
								open: false,
								studentAttend: it.attend,
								studentAbsent: it.absent,
							};
						});

						
						this.dataList.forEach((item,j) => {
							item.studentAbsent2=this.studentData[j].absent4.map((it,i)=> ({
								studentid:it,
								studentName:this.studentData[j].absent[i]
							}));
							item.studentAttend2=this.studentData[j].attend1.map((it,i)=> ({
								studentid:it,
								studentName:this.studentData[j].attend[i]
							}));
						});
						//获取代签数据
						var t=dayjs(this.date).format("YYYY-MM-DD ")
						this.dataList.forEach(item=>{
							axios.postForm('/pc/attendance/t/punch/list' , {date:t,schoolId:schoolId,classesId:item.classId}).then(function (res) {
								var arr=res.data;
								this.student.attend=this.student.attend+ res.data.length;
								this.student.absent=this.student.absent- res.data.length;
								this.student.allNum = this.student.absent + this.student.attend;
								var daiQianArr=[]
								if (arr.length) {
									for(let k=0;k<arr.length; k++){
										var daiQianArr2=item.studentAbsent2.filter(it=>{return it.studentid==arr[k]})
										daiQianArr.push(daiQianArr2[0])
									}
								}
								item.daiQianArr=daiQianArr
							}.bind(this));
						})


					}.bind(this))
				},
				xiala: function (item, i) {
					item.open = !item.open;
					this.selectIndex = i;
				},
				
			},
			watch: {
				date: function () {
					this.getAllData();
				},
				selectTime: function () {
					this.getAllData();
				},
				dataList:function (e) {
					// console.log(e,'eee');
				}
			},
			computed: {
				params: function () {
					var s = dayjs(this.date).format("YYYY-MM-DD ");
					if (this.selectTime == 0) return {
						startTime: s + "00:00:00",
						endTime: dayjs(this.date).add(1, "day").format("YYYY-MM-DD") + ' 00:00:00',
					};
					var k = this.selectTime - 1;
					return {
						startTime: s + this.timeList[k].startTime + ':00',
						endTime: s + this.timeList[k].endTime + ':00',
					};
				},
				exportUrl: function () {
					return '/pc/attendance/sum/export/' + schoolId + '?date=' + this.date + '&' + new URLSearchParams(this.params);
				}
			}
		});

		laydate.render({
			elem: '#Time',
			format: 'yyyy-MM-dd',
			done: function (value) {
				app.date = value;
			}
		});

	</script>
</body>

</html>